const { resolve } = require('path')
module.exports = {
  // 配置入口
  entry: './src/index.js',
  // 配置出口
  output: {
    // 打包之后的js文件的文件名
    filename: './js/build.js',
    // 打包之后的js文件所处的文件夹的路径(要求必须是绝对路径)
    path: resolve(__dirname, 'build'),

    clean: true, //每次打包之前先将build文件夹清空
  },

  mode: 'development', //表单当前是开发环境 js代码不会被压缩
  // 配置加载器
  module: {
    rules: [
      // 利用eslint检查js代码规范
      {
        test: /\.js$/, // 只检测js文件
        exclude: /node_modules/, // 排除node_modules文件夹
        enforce: 'pre', //可能值: "pre" | "post". pre表示前置执行, post表示后置执行
        use: {
          // 使用eslint-loader解析
          loader: 'eslint-loader',
        },
      },
      // 利用babel处理js兼容性问题
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },

      // 处理less文件
      {
        test: /\.less$/,
        // 当前less需要三个loader来处理
        // 所以use后面写的数组.
        // 数组中loader的执行顺序也是从右往左/或从后往前
        // less-loader就是将less代码解析成css代码
        // css-loader 就是将css代码编译成commonjs的形式加入到js文件
        // style-loader 就是把js文件中插入的css代码,以内嵌的形式加入到html中
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}
